<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE composition PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition xmlns:ui="http://java.sun.com/jsf/facelets"
                template="/resources/template/template.xhtml"
                xmlns:p="http://primefaces.org/ui"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:ch="http://java.sun.com/jsf/composite/channel"
                xmlns:pa="http://java.sun.com/jsf/composite/paymentMethod"
                xmlns:au="http://java.sun.com/jsf/composite/autocomplete"
                xmlns:poue="http://primefaces.org/ui/extensions">

    <ui:define name="content">

        <h:form id="form">


            <h:panelGrid columns="4" id="gridSelections" styleClass="alignTop">
                <h:panelGrid columns="1"  id="panSpeciality" styleClass="noBorderGrid1">
                    <p:inputText autocomplete="off" id="txtSearch" value="#{doctorSpecialityController.selectText}" style="width: 176px;" placeholder="Specialities" >
                        <f:ajax execute="txtSearch" render="acSpeciality" event="keyup" />
                        <p:ajax  event="keyup" process="@this" update=":#{p:component('scStaff')}  :#{p:component('tblSessionsOfSelectedConsultant')}" listener="#{bookingController.listnerStaffListForSpecilitySelectedText}"/> 
                    </p:inputText>
                    <h:outputScript>
                        $(document.getElementById('form:txtSearch')).keypress(function (event) {
                        var keycode = (event.keyCode ? event.keyCode : event.which);
                        if (keycode == '13') {
                        document.getElementById("form:txtSearch2").focus();
                        return false;
                        }

                        });
                    </h:outputScript>
                    <p:dataTable  scrollable="true" scrollHeight="280"
                                  id="acSpeciality"
                                  selection="#{bookingController.speciality}"
                                  rowKey="#{spe.id}"
                                  value="#{doctorSpecialityController.selectedItems}"  
                                  var="spe" 
                                  selectionMode="single" 
                                  style="height: 300px; width: 200px; padding: 0px; margin: 0px;">
                        <p:ajax  event="rowSelect" process="@this" update=":#{p:component('scStaff')}  :#{p:component('tblSessionsOfSelectedConsultant')}" listener="#{bookingController.listnerStaffListForRowSelectNew}"/> 
                        <p:column style="text-wrap: avoid; text-overflow: clip; white-space: nowrap;" >
                            <h:outputText id="lblSpeName" value="#{spe.name}" ></h:outputText>
                            <p:tooltip for="lblSpeName" value="#{spe.name}"  showDelay="0" hideDelay="0"   ></p:tooltip>
                        </p:column>
                    </p:dataTable>
                </h:panelGrid>

                <h:panelGroup id="scStaff" >
                    <p:inputText autocomplete="off" id="txtSearch2" value="#{bookingController.selectTextConsultant}" style="width: 176px;margin-left: 2px;" placeholder="Consultant" >
                        <f:ajax  event="keyup" execute="@this" render=":#{p:component('tblCon')} :#{p:component('panSpeciality')}  :#{p:component('tblSessionsOfSelectedConsultant')}" listener="#{bookingController.listnerStaffRowSelect}"/> 
                    </p:inputText>
                    <h:outputScript>
                        $(document.getElementById('form:txtSearch2')).keypress(function (event) {
                        var keycode = (event.keyCode ? event.keyCode : event.which);
                        if (keycode == '13') {
                        document.getElementById("form:txtSearch3").focus();
                        return false;
                        }

                        });
                    </h:outputScript>
                    <p:dataTable id="tblCon"  var="mys" rowKey="#{mys.id}" value="#{bookingController.consultants}"
                                 selection="#{bookingController.staff}" scrollable="true" scrollHeight="280"
                                 style="height: 300px; width: 200px; padding: 2px; margin: auto;" 
                                 selectionMode="single" >
                        <p:column style="text-wrap: avoid; text-overflow: clip; white-space: nowrap;">
                            <h:outputText id="lblConName" value="#{mys.person.name}" />
                            <p:tooltip for="lblConName" value="#{mys.person.nameWithTitle}" 
                                          showDelay="0" hideDelay="0" 
                                           ></p:tooltip>
                        </p:column>
                        <p:ajax  event="rowSelect" 
                                 process="@this" 
                                 update=":#{p:component('tblSessionsOfSelectedConsultant')}"  
                                 listener="#{bookingController.listnerServiceSessionListForRowSelectNew}"/>
                    </p:dataTable>



                </h:panelGroup>

                <h:panelGroup >
                    <p:inputText autocomplete="off" id="txtSearch3" value="#{bookingController.selectTextSession}" style="width: 176px;margin-left: 2px;" placeholder="Session" >
                        <f:ajax  event="keyup" execute="@this" render=":#{p:component('tblSessionsOfSelectedConsultant')}" listener="#{bookingController.listnerSessionRowSelect}"/> 
                    </p:inputText>
                    <h:outputScript>
                        $(document.getElementById('form:txtSearch3')).keypress(function (event) {
                        var keycode = (event.keyCode ? event.keyCode : event.which);
                        if (keycode == '13') {
                        document.getElementById("form:cmbPs_focus").focus();
                        return false;
                        }

                        });
                    </h:outputScript>
                    <p:dataTable value="#{bookingController.serviceSessions}" rowKey="#{ses.transRowNumber}"
                                 id="tblSessionsOfSelectedConsultant" var="ses"
                                 selectionMode="single" 
                                 selection="#{bookingController.selectedServiceSession}"
                                 scrollable="true" 
                                 scrollHeight="300"
                                 style="min-height: 300px; max-width: 500px;">
                        <p:ajax event="rowSelect" process="@this tblSessionsOfSelectedConsultant" 
                                update=":#{p:component('panelArrivals')}"
                                listener="#{bookingController.findArrivals}" />

                        <p:column id="colText" headerText="Session" style="text-wrap: none;"  rendered="#{sessionController.loggedPreference.applicationInstitution eq 'Ruhuna'}">
                            <h:outputText value="#{ses.sessionDate}" rendered="#{!ses.deactivated}">
                                <f:convertDateTime pattern="E"/>
                            </h:outputText>
                            <h:outputText value=" &nbsp;&nbsp;" rendered="#{!ses.deactivated}" />
                            <h:outputText value="#{ses.sessionDate}" rendered="#{!ses.deactivated}">
                                <f:convertDateTime pattern="MMM/dd/yyyy"/>
                            </h:outputText>
                            <h:outputText value=" &nbsp;&nbsp;" rendered="#{!ses.deactivated}" />
                            <h:outputText value="#{ses.startingTime}" rendered="#{!ses.deactivated}">
                                <f:convertDateTime pattern="hh:mm a"/>
                            </h:outputText>
                            <h:outputText value=" &nbsp;&nbsp;Rs." rendered="#{!ses.deactivated}" />
                            <h:outputText value="#{ses.totalFee}" rendered="#{!ses.deactivated}">
                                <f:convertNumber pattern="#,##0" ></f:convertNumber>
                            </h:outputText>
                            <h:outputText value=" &nbsp;&nbsp;" rendered="#{!ses.deactivated}" />
                            <h:outputText value="#{ses.transDisplayCountWithoutCancelRefund}" style="color: green" rendered="#{!ses.deactivated}">
                                <f:convertNumber pattern="00" ></f:convertNumber>
                            </h:outputText>
                            <h:outputText value="(" rendered="#{!ses.deactivated}" />
                            <h:outputText value="#{ses.maxNo}" rendered="#{ses.maxNo ne 0 and !ses.deactivated}" >
                                <f:convertNumber pattern="00" ></f:convertNumber>
                            </h:outputText>
                            <h:outputText value=") &nbsp;&nbsp;#" rendered="#{!ses.deactivated}"/>
                            <h:outputText value="#{ses.displayCount+1}" style="color: red" rendered="#{!ses.deactivated}">
                                <f:convertNumber pattern="00" ></f:convertNumber>
                            </h:outputText>
                            <h:outputText value=" &nbsp;&nbsp;**" rendered="#{!ses.deactivated}"/>
                            <h:outputText value="#{ses.transCreditBillCount}" rendered="#{!ses.deactivated}">
                                <f:convertNumber pattern="00" ></f:convertNumber>
                            </h:outputText>
                            <h:outputText value="**" rendered="#{!ses.deactivated}"/>
                            <h:outputText value="&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;***** &nbsp; " rendered="#{ses.deactivated}" style="color: red;"/>
                            <h:outputText value="#{ses.sessionDate}" rendered="#{ses.deactivated}" style="color: red;">
                                <f:convertDateTime pattern="MMM/dd/yyyy"/>
                            </h:outputText>
                            <h:outputText value=" In" rendered="#{ses.arival eq false}" style="color: green;"/>
                            <h:outputText value=" Out" rendered="#{ses.arival eq true}" style="color: red;"/>
                            <h:outputText value=" &nbsp; (Doctor Leave) &nbsp; ******" rendered="#{ses.deactivated}" style="color: red;"/>
                        </p:column>

                        <p:column headerText="Session" style="text-wrap: none;"  rendered="#{sessionController.loggedPreference.applicationInstitution ne 'Ruhuna'}">
                            <h:outputText id="lblSesName" value="#{ses.name}" escape="false"></h:outputText>
                            <p:tooltip for="lblSesName" value="#{ses.name}" ></p:tooltip>
                        </p:column>
                        <p:column headerText="Max" style="width: 20px!important; text-align: center;" rendered="#{sessionController.loggedPreference.applicationInstitution ne 'Ruhuna'}">
                            <h:outputText value="#{ses.maxNo}" rendered="#{ses.maxNo ne 0}">
                                <f:convertNumber pattern="00" ></f:convertNumber>
                            </h:outputText>
                        </p:column>

                        <p:column headerText="Booked" style="width: 20px!important; text-align: center;" rendered="#{sessionController.loggedPreference.applicationInstitution ne 'Ruhuna'}">
                            <h:outputText value="#{ses.displayCount}">
                                <f:convertNumber pattern="00" ></f:convertNumber>
                            </h:outputText>
                        </p:column>
                        <p:column headerText="Date" style="width: 50px!important; text-align: center;" rendered="#{sessionController.loggedPreference.applicationInstitution ne 'Ruhuna'}">
                            <h:outputText value="#{ses.sessionDate}">
                                <f:convertDateTime pattern="dd MMM"/>
                            </h:outputText>
                        </p:column>
                        <p:column headerText="Time" style="width: 40px!important; text-align: center;" rendered="#{sessionController.loggedPreference.applicationInstitution ne 'Ruhuna'}">
                            <h:outputText value="#{ses.startingTime}">
                                <f:convertDateTime pattern="hh:mm"/>
                            </h:outputText>
                        </p:column>
                        <p:column headerText="Fee" style="width: 40px!important; text-align: center;" rendered="#{sessionController.loggedPreference.applicationInstitution ne 'Ruhuna'}">
                            <h:outputText value="#{ses.totalFee}">
                                <f:convertNumber pattern="#,##0" ></f:convertNumber>
                            </h:outputText>                                                            
                        </p:column>   
                    </p:dataTable>

                </h:panelGroup>

                <p:panel id="panelArrivals" header="Arrivals" >

                    <h:panelGroup rendered="#{bookingController.arrivalRecord eq null}" >
                        <h:outputText value="NOT YET ARRIVED." ></h:outputText>
                        <br/>
                        <p:commandButton value="Mark Arrival" update="panelArrivals :#{p:component('tblSessionsOfSelectedConsultant')}" action="#{bookingController.markAsArrived()}" 
                                         onclick="if (!confirm('Are you sure you want to Mark this Session as arival?'))
                                                return false;">
                        </p:commandButton>
                    </h:panelGroup>

                    <h:panelGroup rendered="#{bookingController.arrivalRecord ne null and bookingController.arrivalRecord.approved eq false}" >
                        <h:outputText value="ARRIVED AT " ></h:outputText>
                        <h:outputText value="#{bookingController.arrivalRecord.recordTimeStamp}" >
                            <f:convertDateTime pattern="hh:mm:ss a" >
                            </f:convertDateTime>
                        </h:outputText>
                        <h:outputText value="." ></h:outputText>
                        <br/>
                        <p:commandButton value="Mark Departure" update="panelArrivals :#{p:component('tblSessionsOfSelectedConsultant')}" action="#{bookingController.markAsLeft()}" 
                                         onclick="if (!confirm('Are you sure you want to Mark this Session as Departure?'))
                                                return false;"></p:commandButton>
                    </h:panelGroup>

                    <h:panelGroup rendered="#{bookingController.arrivalRecord ne null and bookingController.arrivalRecord.approved ne false}" >
                        <h:outputText value="ARRIVED AT " ></h:outputText>
                        <h:outputText value="#{bookingController.arrivalRecord.recordTimeStamp}" >
                            <f:convertDateTime pattern="hh:mm:ss a" >
                            </f:convertDateTime>
                        </h:outputText>
                        <h:outputText value="." ></h:outputText>
                        <br/>
                        <h:outputText value="LEFT AT " ></h:outputText>
                        <h:outputText value="#{bookingController.arrivalRecord.approvedAt}" >
                            <f:convertDateTime pattern="hh:mm:ss a" >
                            </f:convertDateTime>
                        </h:outputText>
                        <h:outputText value="." ></h:outputText>
                        <br/>
                        <p:commandButton value="Mark Arrival Again" update="panelArrivals :#{p:component('tblSessionsOfSelectedConsultant')}" action="#{bookingController.markAsArrived()}" 
                                         onclick="if (!confirm('Are you sure you want to Mark this Session as arival again?'))
                                                return false;"></p:commandButton>
                    </h:panelGroup>

                </p:panel>


            </h:panelGrid>




        </h:form>


    </ui:define>


</ui:composition>